<template>
  <div class="operation-of-skylight-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" />
      <!-- 四角样式 -->

      <!-- 标题栏 -->
      <div class="title">
        <div class="point-icon" />
        <span>天窗作业情况</span>
      </div>
      <!-- 标题栏 -->

      <div class="content">
        <el-scrollbar>
          <div class="inner-content">
            <div class="content-left">
              <!-- 天窗作业情况图表 -->
              <div
                id="PieChart"
                class="echart"
              />
              <!-- 天窗作业情况图表 -->
            </div>
            <div class="content-right">
              <table
                class="table"
                cellspacing="0"
              >
                <tr class="tr-th">
                  <th class="th">线别</th>
                  <th class="th">工区</th>
                  <th class="th">作业地点</th>
                  <th class="th">计划时间(分)</th>
                  <th class="th">状态</th>
                </tr>
                <tr
                  v-for="(item, index) in 7"
                  :key="`a${index}`"
                  class="tr-td"
                >
                  <td class="column1">京广高速线</td>
                  <td class="column2">广州北高铁...</td>
                  <td class="column3">广州北至广州南</td>
                  <td class="column4">1月18日 00:00..</td>
                  <td class="column5">已完成</td>
                </tr>
              </table>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
import { PieChart } from './common/js/EchatsModel';

// 引入echarts
const echarts = require('echarts');

export default {
  data() {
    return {

    };
  },
  mounted() {
    this.getPieChart(); // 加载天窗作业情况Echarts图表
  },
  methods: {
    // 加载天窗作业情况Echarts图表
    getPieChart() {
      const myChart = echarts.init(document.getElementById('PieChart'));
      PieChart(myChart); // 年度维修进度 - 柱状图
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-scrollbar__wrap{
  overflow-x: hidden;
}

.operation-of-skylight-style {
  color: white;
  width: 902px;
  box-sizing: border-box;
  overflow: hidden;
  .component-inner-div {
    position: relative;
    border: 2px solid #122a57;
    height: 100%;
    background-color: rgba($color: #0b1945, $alpha: 0.48);
    box-sizing: border-box;
    .title {
      font-size: 20px;
      padding: 0;
      margin-top: 20px;
      align-items: center;
      display: flex;
      .point-icon {
        background-color: white;
        height: 10px;
        width: 10px;
        margin: 0 10px 0 17px;
      }
    }
    .content {
      position: absolute;
      top: 43px;
      bottom: 0;
      width: 100%;
      padding: 20px 22px 0 22px;
      display: flex;
      .inner-content {
        display: flex;
        .content-left {
          width: 206px;
          .echart {
            width: 206px;
            height: 100%;
          }
        }
        .content-right {
          width: 652px;
          .table {
            width: 100%;
            .tr-th {
              font-size: 16px;
              background-color: #1c337e;
              .th {
                font-weight:300;
                padding: 12px 0 12px 0;
              }
            }
            .tr-td {
              font-size: 16px;
              .column1 {
                width: 110px;
                padding: 12px 0 12px 7px;
              }
              .column2 {
                width: 100px;
                padding: 12px 0 12px 0;
              }
              .column3 {
                padding: 12px 0 12px 15px;
              }
              .column4 {
                width: 115px;
                padding: 12px 0 12px 0;
              }
              .column5 {
                width: 80px;
                padding: 12px 0 12px 20px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
